<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乡镇管理 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .page-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: #4CAF50;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .stat-icon.total { color: #409EFF; }
        .stat-icon.active { color: #67C23A; }
        .stat-icon.villages { color: #E6A23C; }
        .stat-icon.population { color: #F56C6C; }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .town-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .town-type.town { background-color: #409EFF; }
        .town-type.township { background-color: #67C23A; }
        .town-type.street { background-color: #E6A23C; }
        .town-type.ethnic { background-color: #F56C6C; }
        .dialog-form {
            padding: 20px 0;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            border-left: 3px solid #4CAF50;
            padding-left: 10px;
        }
        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-item {
                flex-direction: column;
                align-items: stretch;
            }
            .table-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-home"></i>
                    乡镇管理
                </h1>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon total">
                        <i class="fas fa-home"></i>
                    </div>
                    <div class="stat-value">{{ totalTowns }}</div>
                    <div class="stat-label">总乡镇数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon active">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-value">{{ activeTowns }}</div>
                    <div class="stat-label">启用乡镇</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon villages">
                        <i class="fas fa-tree"></i>
                    </div>
                    <div class="stat-value">{{ totalVillages }}</div>
                    <div class="stat-label">下辖村庄</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon population">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-value">{{ totalPopulation }}万</div>
                    <div class="stat-label">总人口</div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="content-card">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="search-item">
                        <label>关键词：</label>
                        <el-input
                            v-model="searchForm.keyword"
                            placeholder="请输入乡镇名称或代码"
                            style="width: 200px;"
                            clearable>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>所属区县：</label>
                        <el-select v-model="searchForm.districtId" placeholder="请选择区县" style="width: 150px;" clearable>
                            <el-option v-for="district in districtList" :key="district.id" :label="district.name" :value="district.id"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>乡镇类型：</label>
                        <el-select v-model="searchForm.townType" placeholder="请选择类型" style="width: 120px;" clearable>
                            <el-option label="镇" value="town"></el-option>
                            <el-option label="乡" value="township"></el-option>
                            <el-option label="街道" value="street"></el-option>
                            <el-option label="民族乡" value="ethnic"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>状态：</label>
                        <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 100px;" clearable>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchTowns">
                        <i class="fas fa-search"></i> 搜索
                    </el-button>
                    <el-button @click="resetSearch">
                        <i class="fas fa-redo"></i> 重置
                    </el-button>
                </div>

                <!-- 表格头部 -->
                <div class="table-header">
                    <div class="table-title">乡镇列表</div>
                    <div>
                        <el-button type="primary" @click="showAddDialog">
                            <i class="fas fa-plus"></i> 新增乡镇
                        </el-button>
                        <el-button type="success" @click="exportData">
                            <i class="fas fa-download"></i> 导出数据
                        </el-button>
                        <el-button type="warning" @click="batchImport">
                            <i class="fas fa-upload"></i> 批量导入
                        </el-button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <el-table :data="filteredTowns" style="width: 100%" v-loading="loading">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="townCode" label="乡镇代码" width="100" sortable></el-table-column>
                    <el-table-column prop="townName" label="乡镇名称" width="150">
                        <template #default="scope">
                            <strong>{{ scope.row.townName }}</strong>
                        </template>
                    </el-table-column>
                    <el-table-column prop="districtName" label="所属区县" width="120"></el-table-column>
                    <el-table-column prop="townType" label="乡镇类型" width="100">
                        <template #default="scope">
                            <span :class="`town-type ${scope.row.townType}`">
                                {{ getTownTypeText(scope.row.townType) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shortName" label="简称" width="80"></el-table-column>
                    <el-table-column prop="zipCode" label="邮政编码" width="100"></el-table-column>
                    <el-table-column prop="area" label="面积(km²)" width="100" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.area?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="population" label="人口(万)" width="100" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.population?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="villageCount" label="下辖村庄" width="100">
                        <template #default="scope">
                            <el-tag type="info">{{ scope.row.villageCount }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gdp" label="GDP(万元)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.gdp?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="grainOutput" label="粮食产量(吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.grainOutput?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                                {{ scope.row.status === 1 ? '启用' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" sortable></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewTown(scope.row)">
                                <i class="fas fa-eye"></i> 查看
                            </el-button>
                            <el-button size="small" type="primary" @click="editTown(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="deleteTown(scope.row)">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="margin-top: 20px; text-align: center;">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="700px"
            :before-close="handleClose">
            <div class="dialog-form">
                <el-form :model="townForm" :rules="rules" ref="townFormRef" label-width="100px">
                    <div class="form-section">
                        <div class="form-section-title">基本信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="乡镇代码" prop="townCode">
                                    <el-input v-model="townForm.townCode" placeholder="请输入乡镇代码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="乡镇名称" prop="townName">
                                    <el-input v-model="townForm.townName" placeholder="请输入乡镇名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="所属区县" prop="districtId">
                                    <el-select v-model="townForm.districtId" placeholder="请选择区县" style="width: 100%;">
                                        <el-option v-for="district in districtList" :key="district.id" :label="district.name" :value="district.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="乡镇类型" prop="townType">
                                    <el-select v-model="townForm.townType" placeholder="请选择乡镇类型" style="width: 100%;">
                                        <el-option label="镇" value="town"></el-option>
                                        <el-option label="乡" value="township"></el-option>
                                        <el-option label="街道" value="street"></el-option>
                                        <el-option label="民族乡" value="ethnic"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="乡镇简称" prop="shortName">
                                    <el-input v-model="townForm.shortName" placeholder="请输入乡镇简称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮政编码" prop="zipCode">
                                    <el-input v-model="townForm.zipCode" placeholder="请输入邮政编码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="townForm.phone" placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态" prop="status">
                                    <el-radio-group v-model="townForm.status">
                                        <el-radio :label="1">启用</el-radio>
                                        <el-radio :label="0">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">详细信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="面积(km²)" prop="area">
                                    <el-input-number v-model="townForm.area" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人口(万)" prop="population">
                                    <el-input-number v-model="townForm.population" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="GDP(万元)" prop="gdp">
                                    <el-input-number v-model="townForm.gdp" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="下辖村庄数" prop="villageCount">
                                    <el-input-number v-model="townForm.villageCount" :min="0" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="粮食产量(吨)" prop="grainOutput">
                                    <el-input-number v-model="townForm.grainOutput" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="耕地面积(亩)" prop="farmlandArea">
                                    <el-input-number v-model="townForm.farmlandArea" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="乡镇描述" prop="description">
                            <el-input type="textarea" v-model="townForm.description" placeholder="请输入乡镇描述" :rows="3"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveTown">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const loading = ref(false);
                const currentPage = ref(1);
                const pageSize = ref(20);
                const totalCount = ref(0);
                const dialogVisible = ref(false);
                const isEdit = ref(false);
                
                // 搜索表单
                const searchForm = ref({
                    keyword: '',
                    districtId: '',
                    townType: '',
                    status: ''
                });
                
                // 乡镇表单
                const townForm = ref({
                    id: null,
                    townCode: '',
                    townName: '',
                    districtId: '',
                    townType: '',
                    shortName: '',
                    zipCode: '',
                    phone: '',
                    area: null,
                    population: null,
                    gdp: null,
                    villageCount: 0,
                    grainOutput: null,
                    farmlandArea: null,
                    description: '',
                    status: 1
                });
                
                // 表单验证规则
                const rules = {
                    townCode: [{ required: true, message: '请输入乡镇代码', trigger: 'blur' }],
                    townName: [{ required: true, message: '请输入乡镇名称', trigger: 'blur' }],
                    districtId: [{ required: true, message: '请选择所属区县', trigger: 'change' }],
                    townType: [{ required: true, message: '请选择乡镇类型', trigger: 'change' }]
                };
                
                // 区县列表
                const districtList = ref([
                    { id: 1, name: '东城区' },
                    { id: 2, name: '西城区' },
                    { id: 3, name: '朝阳区' },
                    { id: 4, name: '丰台区' },
                    { id: 5, name: '黄浦区' },
                    { id: 6, name: '徐汇区' },
                    { id: 7, name: '玄武区' },
                    { id: 8, name: '上城区' },
                    { id: 9, name: '荔湾区' },
                    { id: 10, name: '罗湖区' }
                ]);
                
                // 模拟乡镇数据
                const townList = ref([
                    {
                        id: 1,
                        townCode: '110101001',
                        townName: '东华门街道',
                        districtId: 1,
                        districtName: '东城区',
                        townType: 'street',
                        shortName: '东华门',
                        zipCode: '100006',
                        phone: '010-65252468',
                        area: 1.64,
                        population: 5.8,
                        gdp: 15600,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '北京市东城区下辖街道，位于天安门广场东侧',
                        status: 1,
                        createTime: '2024-01-15 10:30:00'
                    },
                    {
                        id: 2,
                        townCode: '110101002',
                        townName: '景山街道',
                        districtId: 1,
                        districtName: '东城区',
                        townType: 'street',
                        shortName: '景山',
                        zipCode: '100009',
                        phone: '010-64042890',
                        area: 2.8,
                        population: 7.2,
                        gdp: 18900,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '北京市东城区下辖街道，景山公园所在地',
                        status: 1,
                        createTime: '2024-01-15 10:31:00'
                    },
                    {
                        id: 3,
                        townCode: '130102001',
                        townName: '长安镇',
                        districtId: 3,
                        districtName: '朝阳区',
                        townType: 'town',
                        shortName: '长安',
                        zipCode: '050000',
                        phone: '0311-85123456',
                        area: 85.6,
                        population: 12.5,
                        gdp: 45600,
                        villageCount: 28,
                        grainOutput: 8500,
                        farmlandArea: 45600,
                        description: '河北省石家庄市长安区下辖镇，农业发达',
                        status: 1,
                        createTime: '2024-01-15 10:32:00'
                    },
                    {
                        id: 4,
                        townCode: '130102002',
                        townName: '桥西乡',
                        districtId: 3,
                        districtName: '朝阳区',
                        townType: 'township',
                        shortName: '桥西',
                        zipCode: '050000',
                        phone: '0311-85234567',
                        area: 72.3,
                        population: 9.8,
                        gdp: 32100,
                        villageCount: 22,
                        grainOutput: 6800,
                        farmlandArea: 38900,
                        description: '河北省石家庄市桥西区下辖乡，以农业为主',
                        status: 1,
                        createTime: '2024-01-15 10:33:00'
                    },
                    {
                        id: 5,
                        townCode: '310101001',
                        townName: '南京东路街道',
                        districtId: 5,
                        districtName: '黄浦区',
                        townType: 'street',
                        shortName: '南京东路',
                        zipCode: '200001',
                        phone: '021-63213456',
                        area: 1.2,
                        population: 8.5,
                        gdp: 28900,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '上海市黄浦区下辖街道，商业繁华地段',
                        status: 1,
                        createTime: '2024-01-15 10:34:00'
                    },
                    {
                        id: 6,
                        townCode: '310104001',
                        townName: '湖南路街道',
                        districtId: 6,
                        districtName: '徐汇区',
                        townType: 'street',
                        shortName: '湖南路',
                        zipCode: '200030',
                        phone: '021-64567890',
                        area: 2.1,
                        population: 11.2,
                        gdp: 35600,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '上海市徐汇区下辖街道，文化教育中心',
                        status: 1,
                        createTime: '2024-01-15 10:35:00'
                    },
                    {
                        id: 7,
                        townCode: '320102001',
                        townName: '梅园新村街道',
                        districtId: 7,
                        districtName: '玄武区',
                        townType: 'street',
                        shortName: '梅园',
                        zipCode: '210018',
                        phone: '025-83456789',
                        area: 3.5,
                        population: 6.8,
                        gdp: 18900,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '南京市玄武区下辖街道，历史文化街区',
                        status: 1,
                        createTime: '2024-01-15 10:36:00'
                    },
                    {
                        id: 8,
                        townCode: '330102001',
                        townName: '湖滨街道',
                        districtId: 8,
                        districtName: '上城区',
                        townType: 'street',
                        shortName: '湖滨',
                        zipCode: '310002',
                        phone: '0571-87123456',
                        area: 4.2,
                        population: 9.5,
                        gdp: 25600,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '杭州市上城区下辖街道，西湖景区核心区域',
                        status: 1,
                        createTime: '2024-01-15 10:37:00'
                    },
                    {
                        id: 9,
                        townCode: '440103001',
                        townName: '沙面街道',
                        districtId: 9,
                        districtName: '荔湾区',
                        townType: 'street',
                        shortName: '沙面',
                        zipCode: '510130',
                        phone: '020-81234567',
                        area: 0.3,
                        population: 1.2,
                        gdp: 8900,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '广州市荔湾区下辖街道，历史文化保护区',
                        status: 1,
                        createTime: '2024-01-15 10:38:00'
                    },
                    {
                        id: 10,
                        townCode: '440303001',
                        townName: '桂园街道',
                        districtId: 10,
                        districtName: '罗湖区',
                        townType: 'street',
                        shortName: '桂园',
                        zipCode: '518001',
                        phone: '0755-25123456',
                        area: 3.8,
                        population: 15.6,
                        gdp: 45600,
                        villageCount: 0,
                        grainOutput: 0,
                        farmlandArea: 0,
                        description: '深圳市罗湖区下辖街道，商业金融中心',
                        status: 1,
                        createTime: '2024-01-15 10:39:00'
                    }
                ]);
                
                // 计算属性
                const totalTowns = computed(() => townList.value.length);
                const activeTowns = computed(() => townList.value.filter(town => town.status === 1).length);
                const totalVillages = computed(() => townList.value.reduce((sum, town) => sum + town.villageCount, 0));
                const totalPopulation = computed(() => Math.round(townList.value.reduce((sum, town) => sum + town.population, 0) * 10) / 10);
                
                const dialogTitle = computed(() => isEdit.value ? '编辑乡镇' : '新增乡镇');
                
                const filteredTowns = computed(() => {
                    let filtered = townList.value;
                    
                    if (searchForm.value.keyword) {
                        const keyword = searchForm.value.keyword.toLowerCase();
                        filtered = filtered.filter(town => 
                            town.townName.toLowerCase().includes(keyword) ||
                            town.townCode.includes(keyword)
                        );
                    }
                    
                    if (searchForm.value.districtId) {
                        filtered = filtered.filter(town => town.districtId === searchForm.value.districtId);
                    }
                    
                    if (searchForm.value.townType) {
                        filtered = filtered.filter(town => town.townType === searchForm.value.townType);
                    }
                    
                    if (searchForm.value.status !== '') {
                        filtered = filtered.filter(town => town.status === parseInt(searchForm.value.status));
                    }
                    
                    totalCount.value = filtered.length;
                    return filtered;
                });
                
                // 方法
                const getTownTypeText = (type) => {
                    const typeMap = {
                        'town': '镇',
                        'township': '乡',
                        'street': '街道',
                        'ethnic': '民族乡'
                    };
                    return typeMap[type] || '未知';
                };
                
                const searchTowns = () => {
                    loading.value = true;
                    setTimeout(() => {
                        loading.value = false;
                        ElMessage.success('搜索完成');
                    }, 500);
                };
                
                const resetSearch = () => {
                    searchForm.value = {
                        keyword: '',
                        districtId: '',
                        townType: '',
                        status: ''
                    };
                    ElMessage.info('搜索条件已重置');
                };
                
                const showAddDialog = () => {
                    isEdit.value = false;
                    townForm.value = {
                        id: null,
                        townCode: '',
                        townName: '',
                        districtId: '',
                        townType: '',
                        shortName: '',
                        zipCode: '',
                        phone: '',
                        area: null,
                        population: null,
                        gdp: null,
                        villageCount: 0,
                        grainOutput: null,
                        farmlandArea: null,
                        description: '',
                        status: 1
                    };
                    dialogVisible.value = true;
                };
                
                const viewTown = (town) => {
                    ElMessage.info(`查看乡镇：${town.townName}`);
                };
                
                const editTown = (town) => {
                    isEdit.value = true;
                    townForm.value = { ...town };
                    dialogVisible.value = true;
                };
                
                const deleteTown = (town) => {
                    ElMessageBox.confirm(
                        `确定要删除乡镇 "${town.townName}" 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        const index = townList.value.findIndex(t => t.id === town.id);
                        if (index > -1) {
                            townList.value.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                };
                
                const saveTown = () => {
                    if (isEdit.value) {
                        // 编辑乡镇
                        const index = townList.value.findIndex(t => t.id === townForm.value.id);
                        if (index > -1) {
                            // 更新区县名称
                            const district = districtList.value.find(d => d.id === townForm.value.districtId);
                            townForm.value.districtName = district ? district.name : '';
                            
                            townList.value[index] = { ...townForm.value };
                            ElMessage.success('乡镇更新成功');
                        }
                    } else {
                        // 新增乡镇
                        const district = districtList.value.find(d => d.id === townForm.value.districtId);
                        const newTown = {
                            ...townForm.value,
                            id: Date.now(),
                            districtName: district ? district.name : '',
                            createTime: new Date().toLocaleString('zh-CN')
                        };
                        townList.value.unshift(newTown);
                        ElMessage.success('乡镇创建成功');
                    }
                    
                    dialogVisible.value = false;
                };
                
                const handleClose = () => {
                    dialogVisible.value = false;
                };
                
                const exportData = () => {
                    ElMessage.success('数据导出功能开发中...');
                };
                
                const batchImport = () => {
                    ElMessage.success('批量导入功能开发中...');
                };
                
                // 生命周期
                onMounted(() => {
                    // 初始化数据
                });
                
                return {
                    loading,
                    currentPage,
                    pageSize,
                    totalCount,
                    dialogVisible,
                    isEdit,
                    searchForm,
                    townForm,
                    rules,
                    districtList,
                    townList,
                    totalTowns,
                    activeTowns,
                    totalVillages,
                    totalPopulation,
                    dialogTitle,
                    filteredTowns,
                    getTownTypeText,
                    searchTowns,
                    resetSearch,
                    showAddDialog,
                    viewTown,
                    editTown,
                    deleteTown,
                    saveTown,
                    handleClose,
                    exportData,
                    batchImport
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>